<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background-image: url(0.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .d1{
            width:60%;
            margin:30px auto;
        }
        h1{
            margin:20px 80px;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <template id="t1">
        <div class="d1">
            <h1>学生信息表</h1>
            <table border="1" cellspacing="0" cellpadding="10">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>电话</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in users">
                        <td>{{user.id}}</td>
                        <td>{{user.username}}</td>
                        <td>{{user.phone}}</td>
                        <td >
                            <button @click="del(user.id)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </template>
    <script src="./jquery.min.js"></script>
    <script src="./vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            template:'#t1',
            data:function(){
                return{
                    users:'[]'
                }
            },
            created:function(){
                this.getUsers();
            },
            methods:{
                getUsers:function(){
                    var that = this;
                    $.get('/users/index').done(function(result){
                        that.users=result;
                    })
                },
                del:function(id){
                    if(confirm('该信息重要！您确定需要删除吗？')==true){
                         $.get('/users/del',{id:id}).done(function(){
                        location.reload();
                    })
                    }
                }
            }
        });
    </script>
</body>
</html>